<template>
  <div>
    <div class="mixin-components-container">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ dateTime }}</span>
          </div>
          <div class="filter-container">
            <!-- 报班卡号 -->
            <el-form
              :inline="true"
              ref="form"
              :model="listQuery"
              label-width="100px"
            >
              <el-form-item label="报班卡号：">
                <el-input
                  placeholder="请输入报班卡号"
                  v-model="listQuery.bbkh"
                  class="cardNumber"
                  style="width: 200px"
                  clearable
                  @keydown.enter.native="startCheckingTickets()"
                />
              </el-form-item>
              <el-button
                class="filter-item"
                type="primary"
                @click="startCheckingTickets()"
              >
                开始检票
              </el-button>
              <el-button
                class="filter-item"
                type="primary"
                @click="stopCheckingTickets(bbkh)"
              >
                停止检票
              </el-button>
              <el-button
                class="filter-item"
                type="primary"
                @click="chaxun(bbkh)"
              >
                车卡互查
              </el-button>
            </el-form>
            <!-- 报班卡号  end -->
            <!-- 按钮 -->
          </div>
          <div class="filter-containe">
            <el-table
              :data="currentData"
              v-if="isCarShow"
              style="width: 100%"
              max-height="250"
            >
              <el-table-column fixed prop="cpzh" label="车牌照号" width="150" />
              <el-table-column prop="fcsj" label="发车时间" width="120" />
              <el-table-column prop="czxm" label="车主姓名" width="120" />
              <el-table-column prop="zwgs" label="座位个数" width="120" />
              <el-table-column prop="xlmc" label="线路名称" width="120" />
              <el-table-column prop="bbkh" label="报班卡号" width="120" />
              <el-table-column prop="syzw" label="剩余座位" width="120" />
              <el-table-column prop="xlgs" label="线路公司" width="120" />
              <el-table-column prop="bclx" label="班次类型" width="120" />
              <el-table-column prop="xlbh" label="线路编号" width="120" />
            </el-table>
          </div>
        </el-card>
        <el-card class="box-card" v-if="isCarShow">
          <div slot="header" class="clearfix">
            <span>{{ message }}</span>
          </div>
          <div class="filter-containe">
            <el-form
              :inline="true"
              ref="form"
              :model="tableQuery"
              label-width="100px"
            >
              <el-form-item label="车票编号：">
                <el-input
                  placeholder="请输入车票编号"
                  v-model="tableQuery.cpbh"
                  class="cardNumber"
                  style="width: 200px"
                  clearable
                  @keydown.enter.native="addTickets()"
                />
              </el-form-item>
              <el-form-item label="检票人数：">
                <el-input
                  v-model="people"
                  class="cardNumber"
                  style="width: 80px"
                />
              </el-form-item>
              <el-form-item label="座位个数：">
                <el-input
                  v-model="number"
                  class="cardNumber"
                  style="width: 80px"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="filter-containe">
            <el-table style="width: 100%" :data="ticketData" v-if="istableShow">
              <el-table-column fixed prop="bbkh" label="报班卡号" width="150">
              </el-table-column>
              <el-table-column prop="mdcz" label="目的车站" width="120">
              </el-table-column>
              <el-table-column prop="cpzt" label="车票状态" width="120">
              </el-table-column>
              <el-table-column prop="jpk" label="检票口" width="120">
              </el-table-column>
              <el-table-column prop="zwh" label="座位号" width="120">
              </el-table-column>
              <el-table-column prop="cpbh" label="车票编号" width="120">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Jianpiao",
  data() {
    return {
      listQuery: {
        bbkh: "", // 报班卡号
      },
      currentData: [
        {
          bbkh: "",
        },
      ], //当前车辆数据
      dateTime: "", // 当前时间
      tableQuery: {
        cpbh: "", //车票编号
      },
      people: 0,
      number: 0,
      data: [
        // 根据报班卡号，获取车辆信息
        {
          // 车辆表
          cpzh: "冀A11111", // 车牌照号
          czxm: "东站", // 车主姓名
          zwgs: "27", // 座位个数
          bbkh: 911111, // 报班卡号
          syzw: "27", // 座位个数
          xlbh: "118", // 线路编号
          // 计划表
          fcsj: "11：30", // 发车时间
          bclx: "固定", // 班次类型
          // 线路表
          xlmc: "回隆", // 线路名称
          xlgs: "邯郸东站", // 线路公司
          ticket: [
            {
              bbkh: 911111, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 911111, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 911111, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
        {
          cpzh: "冀A22222",
          czxm: "东站",
          zwgs: "27",
          bbkh: 922222,
          syzw: "27",
          xlbh: "118",
          fcsj: "12：30",
          bclx: "固定",
          xlmc: "回隆",
          xlgs: "邯郸东站",
          ticket: [
            {
              bbkh: 922222, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 922222, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 922222, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
        {
          cpzh: "冀A33333",
          czxm: "东站",
          zwgs: "27",
          bbkh: 933333,
          syzw: "27",
          xlbh: "118",
          fcsj: "13：30",
          bclx: "固定",
          xlmc: "回隆",
          xlgs: "邯郸东站",
          ticket: [
            {
              bbkh: 933333, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 933333, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 933333, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
        {
          cpzh: "冀A44444",
          czxm: "东站",
          zwgs: "27",
          bbkh: 944444,
          syzw: "27",
          xlbh: "118",
          fcsj: "14：30",
          bclx: "固定",
          xlmc: "回隆",
          xlgs: "邯郸东站",
          ticket: [
            {
              bbkh: 944444, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 944444, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 944444, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
        {
          cpzh: "冀A55555",
          czxm: "东站",
          zwgs: "27",
          bbkh: 955555,
          syzw: "27",
          xlbh: "118",
          fcsj: "15：30",
          bclx: "固定",
          xlmc: "回隆",
          xlgs: "邯郸东站",
          ticket: [
            {
              bbkh: 933333, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 933333, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 933333, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
        {
          cpzh: "冀A66666",
          czxm: "东站",
          zwgs: "27",
          bbkh: 966666,
          syzw: "27",
          xlbh: "118",
          fcsj: "16：30",
          bclx: "固定",
          xlmc: "回隆",
          xlgs: "邯郸东站",
          ticket: [
            {
              bbkh: 966666, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 966666, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 966666, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
        {
          cpzh: "冀A77777",
          czxm: "东站",
          zwgs: "27",
          bbkh: 977777,
          syzw: "27",
          xlbh: "118",
          fcsj: "17：30",
          bclx: "固定",
          xlmc: "回隆",
          xlgs: "邯郸东站",
          ticket: [
            {
              bbkh: 977777, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "111111", // 车票编号
            },
            {
              bbkh: 977777, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "222222", // 车票编号
            },
            {
              bbkh: 977777, // 报班卡号
              mdcz: "曲周", //目的车站
              cpzt: "正常", //车票状态
              jpk: "0", // 检票口
              zwh: "0", // 座位号
              cpbh: "333333", // 车票编号
            },
          ],
        },
      ],
      ticketData: [],
      message: "",
      FormData: [],
      status: false,
      isCarShow: false,
      istableShow: false
    };
  },
  watch: {},
  methods: {
    // 点击开始检票按钮
    startCheckingTickets() {
      this.isCarShow = false;
      this.currentData = [{ bbkh: "" }];
      this.getList();
    },

    // 通过报班卡号，获取车辆信息
    getList() {
      const data = this.data;
      // console.log("获取到的数据", data);
      // console.log(this.listQuery.bbkh);
      for (let i = 0; i < data.length; i++) {
        // console.log("循环", i + 1, "次");
        if (this.listQuery.bbkh == this.data[i].bbkh) {
          // console.log(this.data[i].bbkh);
          this.currentData[0] = this.data[i];
          this.isCarShow = true;
          // console.log("当前车辆信息", this.currentData);
          // console.log("显示");
          break;
        }
      }
      // console.log(this.isCarShow);
      if (!this.isCarShow) {
        this.isCarShow = false;
        // console.log("隐藏");
        this.$message.error(
          "该车未报班或检票口出错，只有当检票口正确且该车已报班才能正确完成车辆的开始检票"
        );
      }
    },

    // 通过报班卡号，获取车票信息
    getTicket() {
      this.FormData = [];
      for (let i = 0; i < this.data.length; i++) {
        if (this.listQuery.bbkh == this.data[i].bbkh) {
          this.FormData = this.data[i].ticket;
        }
      }
      this.istableShow = false
      // console.log("获取到的数据", this.FormData);
      // console.log(this.listQuery.bbkh);
    },

    startTickets() {
      for (let i = 0; i < this.FormData.length; i++) {
        if (this.tableQuery.cpbh == this.FormData[i].cpbh) {
          this.status = true;
          return this.FormData[i]
        }
      }
    },
    // 检票操作
    addTickets() {
      // 获取车票信息
      this.getTicket();
      // console.log("获取到的数据", this.FormData);
      // 修改车票状态
      this.startTickets();
      let ticket = this.startTickets();
      // console.log(ticket)
      // console.log(this.status)
      if (this.status) {
        this.$message({
              type: "success",
              message: "检票成功!",
            });
            // console.log("this.currentData",this.currentData)
          this.message = this.tableQuery.cpbh + "，检票成功，对应车辆为：" + ticket.mdcz;
          this.number ++
      }
      console.log(this.ticketData.length)
      let index = this.ticketData.length
      this.ticketData[index] = ticket
      console.log(this.ticketData)
      this.istableShow = true
    },

    // 定时器，500毫秒刷新一次
    currentTime() {
      setInterval(this.getTime, 500);
    },
    // 获取当前时间
    getTime() {
      let hour = new Date().getHours();
      let minute =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let second =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.dateTime = hour + ":" + minute + ":" + second;
      // console.log(this.dateTime);
    },
  },
  mounted() {
    // 实时获取当前时间
    this.currentTime();
    // this.addTickets();
  },
};
</script>

<style scoped>
.dialog-button {
  margin-top: 50px;
}
.cardNumber {
  margin-right: 50px;
}
.button-style {
  margin-bottom: 15px;
}
.button {
  margin-top: 30px;
  margin-bottom: 10px;
}
.right-input {
  float: right;
}
button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
span {
  font-size: 14px;
  color: #606266;
}
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item {
  min-height: 100px;
}
.box-card {
  margin-bottom: 10px;
}
</style>

